<template>
  <div>
    <el-row class="row-basic">
      <el-card class="box-card" shadow="never">
        <el-row>
          <el-col>
            <h2>{{userData.name}}</h2>
          </el-col>
          <el-col>
            <el-col :span="12">
              <el-upload
                class="avatar-uploader"
                action="/api/file/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar" id="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <el-button type="primary" size="small" @click="$router.push({ name: 'user-user-update',params:{id:userData.id}})"
                         icon="el-icon-plus">修改个人信息
              </el-button>
            </el-col>
            <el-col :span="12">
              <el-row><h4>学号：{{userData.no}}</h4></el-row>
              <el-row><h4>登录名：{{userData.loginName}}</h4></el-row>
              <el-row><h4>邮箱：{{userData.email}}</h4></el-row>
            </el-col>
            <el-col :span="12">
              <el-row><h4>电话：{{userData.phone}}</h4></el-row>
              <!--<el-row><h4>手机号：{{userData.mobile}}</h4></el-row>-->
            </el-col>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
  </div>

</template>

<script>
  import TableTreeColumn from '@/components/table-tree-column'
  import {treeDataTranslate, handleImg} from '@/utils'

  export default {
    name: 'user-detail',
    components: {
      TableTreeColumn
    },
    data () {
      return {
        activeName: 'role',
        roleList: [],
        menuList: [],
        deptList: [],
        userData: {},
        imageUrl: '',
        editsForm: {
          loginName: '',
          no: '',
          email: '',
          phone: '',
          sex: '',
          college: ''
        }
      }
    },
    methods: {
      init (id) {
        this.$http({
          url: this.$http.adornUrl('/Yang/User/findById'),
          method: 'get',
          params: this.$http.adornParams({id: id})
        }).then(({data}) => {
          console.log('data1111', data)
          this.userData = data
          this.imageUrl = data.photo
          handleImg(this.dataForm.photo, 'avatar')
        }).then(() => {
          /**
           * 获取部门信息
           */
          this.$http({
            url: this.$http.adornUrl('/sysUser/query/listDeptByUserId'),
            method: 'get',
            params: this.$http.adornParams({id: id})
          }).then(({data}) => {
            this.deptList = treeDataTranslate(data)
          })
          /**
           * 获取菜单信息
           */
          this.$http({
            url: this.$http.adornUrl('/sysUser/query/listMenuByUserId'),
            // url: this.$http.adornUrl('/sysRole/listMenuIdByRoleId'),
            method: 'get',
            params: this.$http.adornParams({id: id})
          }).then(({data}) => {
            // this.menuList = treeDataTranslate(data)
            this.menuList = data
          })

          /**
           * 获取用户角色信息
           */
          this.$http({
            url: this.$http.adornUrl('/sysUser/query/listRoleByUserId'),
            method: 'get',
            params: this.$http.adornParams({id: id})
          }).then(({data}) => {
            this.roleList = data
          })
        })
      },
      handleAvatarSuccess (res, file) {
        console.log('file', file)
        console.log('res', res)
        this.imageUrl = 'api/file/' + res.data.bucketName + '-' + res.data.fileName
      },
      beforeAvatarUpload (file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M
      },
      // modifyInfo(user) {
      //   this.$router.push('/user-update/' + this.userData)
      // },
      getUserInfo () {
        this.$http({
          url: 'myinfo',
          method: 'get'
        }).then(({data}) => {
          console.log('myinfo333', data)
          this.userData = data
          this.loading = false
          this.userId = data.id
          this.userName = data.name
          this.loginName = data.loginName
          this.email = data.email
          this.photo = data.photo
          this.phone = data.phone
          this.sex = data.sex
          this.college = data.college
        })
      }
    },
    created: function () {
      // let id = this.$route.params.id || 0
      let id = this.$store.state.user.id
      console.log(id)
      this.init(id)
    // this.getUserInfo();
    }
    // created(){
    //   this.init()
    // }
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
